<script setup lang="ts">
import { computed } from "vue";
import { ElCol, ElRow } from "element-plus";
import ChartMp from "./components/ChartMp.vue";
import ChartSku from "./components/ChartSku.vue";
import ChartRank from "./components/ChartRank.vue";
import CardView from "./components/CardView.vue";

import useRequest from "@/hooks/useRequest";
import API from "@/api/base";

import imgVip from "@/assets/images/statistic-vip.png";
import imgUser from "@/assets/images/statistic-user.png";
import imgGoods from "@/assets/images/statistic-goods.png";
import imgSup from "@/assets/images/statistic-supp.png";

const list = [
  {
    label: "加盟会员",
    key: "member",
    url: "/vip/list",
    suburl: "/examine?type=vip",
    img: imgVip,
    colors: ["#aaaaf2", "#aaaaf200"],
  },
  {
    label: "商品SKU",
    key: "sku",
    url: "/goods/list",
    suburl: "/examine",
    img: imgGoods,
    colors: ["#ec685895", "#ec685800"],
  },
  {
    label: "供应商",
    key: "supplier",
    url: "/supplier/list",
    suburl: "/examine?type=supplier",
    img: imgSup,
    colors: ["#f4c353", "#f4c35300"],
  },
  {
    label: "用户数",
    key: "user",
    url: "/vip/list",
    img: imgUser,
    colors: ["#f2a56d", "#f2a56d00"],
  },
];

const { data } = useRequest(API.statistics);

const formaterChartData = computed(() => {
  if (data.value) {
    return {
      category_rank: data.value.category_rank?.map((e) => ({
        ...e,
        value: e.num,
        name: e.category_name,
      })),
      goods_rank: data.value.goods_rank?.map((e) => ({
        ...e,
        value: e.num,
        name: e.goods_name,
      })),
    };
  }
});
</script>

<template>
  <ElRow :gutter="20">
    <ElCol
      v-for="item in list"
      :key="item.key"
      :xs="24"
      :sm="12"
      :lg="6"
      class="mb-6"
    >
      <CardView :data="data?.summary" :config="item" />
    </ElCol>
  </ElRow>

  <ElRow :gutter="20">
    <ElCol :span="24" :md="12">
      <ChartMp />

      <ChartSku class="my-5" :data="formaterChartData?.category_rank" />
    </ElCol>

    <ElCol :span="24" :md="12">
      <ChartRank :data="formaterChartData?.goods_rank" />
    </ElCol>
  </ElRow>
</template>
